<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>搜索</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/swiper.css">
    <style>
        body {
            font-size: 14px;
        }

        header {
            background: #fff;
        }

        .aui-searchbar {
            -webkit-box-align: start;
            -webkit-box-pack: start;
            line-height: 34px;
            height: 34px;
        }

        .aui-tab-nav li {
            position: relative;
        }

        .aui-tab-nav li.active {
            color: #327afa;
            border: none;

        }

        .aui-tab-nav li.active:before {
            content: "";
            bottom: 0;
            position: absolute;
            height: 2px;
            background: #327afa;
            width: 40%;
            left: 30%;
        }

        .serch {
            font-size: 12px;
        }

        .searchTitle {
            padding: 12px 0;
            color: #9c9c9c;
        }

        .aui-iconfont {
            margin-right: 5px;
        }

        .searchList {
            overflow: hidden;
        }

        .aui-content-padded {
            margin-bottom: 0;
        }

        .searchList li:nth-of-type(3n) {
            margin-right: 0%;
        }

        .searchList li {
            margin-right: 2%;
            text-align: center;
            margin-bottom: 10px;
            width: 32%;
            float: left;
        }

        .searchList li span {
            padding: 8px 0;
            display: block;
            border: 1px solid #d9d9d9;
            background: #fff;
        }

        .aui-iconfont {
            font-size: 14px;
        }

        .aui-list-view {
            margin-bottom: 0;
        }

        .aui-content .aui-list-view:last-of-type:after {
            border: none;
        }

        .noHistory {
            width: 100%;
            padding: 50px;
            background: #fff;
            color: #9c9c9c;
        }

        .mui-table-view-cell:after {
            left: 0;
        }

        input[type=search] {
            border-radius: 0;
        }

        .aui-searchbar-wrap {
            background: #FFF;
        }
        .aui-text-info{
            color: #000 !important;
        }
        input[type=search]{
            background: #efeff4;
            text-align: left !important;
        }
    </style>
</head>
<body>
<header>
    <div class="aui-searchbar-wrap demo aui-border-b" id="search">
        <div class="aui-searchbar aui-border-radius">
            <div class="aui-searchbar-input">
                <form action="javascript:search();">
                    <input type="search" placeholder="请输入搜索内容" id="search-input" tapmode onclick="doSearch();">
                </form>
            </div>

        </div>
        <div class="aui-searchbar-cancel aui-text-info" tapmode onclick="closeWin();api.closeFrame();">取消</div>
    </div>
</header>
<div class="containt">
    <div class="aui-tab">
        <ul class="aui-tab-nav">
            <li class="active" data-type="proHistory" tapmode onclick="changeType(this)">产品</li>
            <li data-type="sellerHistory" tapmode onclick="changeType(this)">供应商</li>
        </ul>
    </div>
    <div class="serch aui-content-padded">
        <div class="searchTitle"><span>大家都在搜</span>
            <span class="aui-pull-right changeSearch"><i
                    class="aui-iconfont aui-icon-refresh"></i>换一批</span></div>
        <div class="searchList swiper-container">
            <div class="swiper-wrapper">
                <ul class="swiper-slide" id="hot-content">

                </ul>
            </div>
        </div>
        <div class="searchTitle"><span>搜索历史</span></div>
    </div>
    <div class="aui-content historyList">
        <ul class=" mui-table-view historyListUl">
            <!--<li class="mui-table-view-cell">-->
            <!--<div class="mui-slider-right mui-disabled">-->
            <!--<a class="mui-btn mui-btn-red delet">删除</a>-->
            <!--</div>-->
            <!--<div class="mui-slider-handle"  onclick='searchClick(this)'>-->
            <!--纱布-->
            <!--</div>-->
            <!--</li>-->
        </ul>
        <ul class="aui-list-view" tapmode onclick="clearHistory()">
            <li class="aui-list-view-cell aui-text-center">
                <span style="color:#666;">清空搜索历史</span>
            </li>
        </ul>
    </div>
    <div class="noHistory aui-text-center">
        <i class="aui-iconfont aui-icon-time"></i>暂无搜索历史
    </div>
</div>
<script id="hot-template" type="text/x-dot-template">
    {{ for(var i in it){ }}
    <li>
        <span class="hot-item" data-type="{{=it[i].itemid}}">{{=it[i].keyword}}</span>
    </li>
    {{ } }}

</script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/mui.min.js"></script>
<script type="text/javascript" src="../script/swiper.js"></script>
<script type="text/javascript">
    var isLock = false,page=1;
    var type = "";//商品还是商家
    var isBlured=false;
    apiready = function () {
        api.parseTapmode();
        getData();
        loadPage();

        var header = $api.dom('header');
        $api.fixIos7Bar(header);

        if(api.pageParam.fromIndex){
            $('body').css({'background':'rgba(243,243,243,0.94)'})
            $('#search-input').unbind('blur').bind('blur',function(e){
                if(!isBlured){
                    closeFrame();
                }
            });
        }
    }

    $(document).ready(function(){
        mui.init();
        doSearch();

        $('.changeSearch').bind('tap',function(e){
            e.preventDefault();
            isBlured=true;
            changeSearch();
        });

        $('body').delegate('.hot-item','tap',function(e){
            e.preventDefault();
            isBlured=true;
            searchClick($(this));
        })
    })


    function loadPage() {
        //加载大家都在搜的
        searchSwiper();
        //加载搜索历史
        type = "proHistory";
        getHistory(type);
    }
    function doSearch() {
        $api.addCls($api.dom(".aui-searchbar-wrap"), "focus");
        $api.dom('.aui-searchbar-input input').focus();
    }
    //加载搜索历史
    var historyLists;
    function getHistory(type) {
        $(".historyListUl").html("");
        historyLists = getLocalStorage(type);
//            alert(historyLists)
        if (historyLists == "" || historyLists == null) {
            $(".historyList").css({"display": "none"});
            $(".noHistory").css({"display": "block"});
        } else {
            $(".historyList").css({"display": "block"});
            $(".noHistory").css({"display": "none"});
            var historyHtml = "";
            for (i = historyLists.length - 1, j = 1; i >= 0; i--) {
                if (j > 10) {
                    break;
                }
                j++;
                if (historyLists[i] != "") {
                    historyHtml += '<li class="mui-table-view-cell">';
                    historyHtml += '<div class="mui-slider-right mui-disabled">';
                    historyHtml += '<a class="mui-btn mui-btn-red delet" data-index="' + i + '" >删除</a>';
                    historyHtml += '</div>';
                    historyHtml += '<div class="mui-slider-handle hot-item">';
                    historyHtml += historyLists[i];
                    historyHtml += '</div></li>';
                }
            }
            $(".historyListUl").append(historyHtml);
        }
    }
    // 初始化换一批的滑动插件
    function searchSwiper() {
        mySwiper = new Swiper('.swiper-container', {});
        //禁止滑动
        mySwiper.lockSwipes();
    }
    //单击换一批
    index = 1;
    function changeSearch() {
        console.log(mySwiper.realIndex)
//        var result = "<ul class='swiper-slide'>";
//        for (i = 0; i < 6; i++) {
//            result += ("<li><span tapmode onclick='searchClick(this)'>新数据" + index + "</span></li>");
//            index++;
//        }
//        result += "</ul>"
        page++;
        getData();

//        mySwiper.appendSlide(result)
        mySwiper.unlockSwipes();
        mySwiper.slideNext();
        mySwiper.lockSwipes();
    }
    //单个删除搜索历史
    $(document).on("click", ".delet", function () {
        var index = parseInt($(this).attr("data-index"));
        $(this).parents("li").remove();
        historyLists.splice(index, 1);//删除对应的
        clearStorage(type);//先清空在添加，不然会
        setLocalStorage(type, historyLists);
        getHistory(type)

    })
    //删除搜索历史
    function clearHistory() {
        // alert(type)
        clearStorage(type);
        $(".historyList").css({"display": "none"});
        $(".noHistory").css({"display": "block"});
    }
    function clearInput() {
        $api.val($api.byId("search-input"), '');
    }

    //搜索框搜索
    function search() {
        isBlured=true;
        var content = $api.val($api.byId("search-input"));
        if (content) {
            //添加到localStorage
            setLocalStorage(type, content);
            getHistory(type);
            sendSarchValue(type, content);
        }
        else {
            api.alert({
                title: '搜索提示',
                msg: '您没有输入任何内容'
            });
        }
    }
    //单击历史和大家都在搜
    function searchClick(obj) {
        isBlured=true;
        var searchValue = $(obj).text();
        var dataType=$(obj).attr("data-type");
        if(dataType){
            type="proHistory";
        }
        sendSarchValue(type, searchValue);

    }
    function sendSarchValue(type, content) {
        //传参数到proList页面刷选
        if (type == "proHistory") {
            api.openWin({
                name: 'proList',
                url: 'proList_win.html',
                pageParam: {
                    searchValue: content
                }
            });
        } else {

            api.openWin({
                name: 'sellerList',
                url: 'sellerList_win.html',
                pageParam: {
                    searchValue: content
                }
            });
        }
    }
    function changeType(obj) {
        $(obj).parent().find("li").removeClass("active");
        $(obj).addClass("active");
        type = $(obj).attr("data-type");
        getHistory(type);
    }
    //获取热搜
    function getData() {
        isLock = true;
        // showLoading();
        var data = {};
        data['page'] = page;
        var url="Search/searchHot";
        ajaxRequest(url, 'post', data, function (ret, err) {
            if (ret.status == 1) {
                var tpl = $api.byId('hot-template').text;
                var content = $api.byId("hot-content");
                var tempFn = doT.template(tpl);
                    $api.html(content, tempFn(ret.msg));
                    isLock = false;

//                api.toast({
//                    msg:"数据加载成功！",
//                    duration: 2000,
//                    location: 'bottom'
//                });
                // hideLoading();
            } else {
                // hideLoading();
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });
    }
</script>
</html>